<template>
    <div class="theme_red">
        <div id="nav">
            <router-link to="/shopping">购物车</router-link>| <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>| <router-link to="/pdf">Pdf</router-link>|
            <router-link to="/video">视频播放</router-link> |<router-link to="/i18n">国际化</router-link>|
            <router-link to="/fu">换肤</router-link>| <router-link to="/drag">拖拽</router-link>|
            <router-link to="/post">锚点导航</router-link> |
            <router-link to="/for">For循环</router-link>
        </div>
        <router-view />
    </div>
</template>
<script>
export default {
    name: 'App',
    mounted() {
        this.$nextTick(() => {
            let link = document.createElement('link');
            link.type = 'text/css';
            link.id = 'theme';
            link.rel = 'stylesheet';
            link.href = './theme_red.css';
            console.log(link);
            document.getElementsByTagName('head')[0].appendChild(link);

            // document.getElementById('app').setAttribute('class', 'theme_red');
        });
    }
};
</script>
<style lang="less">
:root {
    --theme_bg_color: #eb6161;
}

#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
